
<template>
    
  <div style="height: 100%;  width: 100%">
        <v-chart :options="barOptions" @click="onClick" />     <v-chart
      :options="lineOptions"
    />
        
    <div id="main" style="width: 600px;  height: 400px"></div>
      
  </div>
</template>


<script>
import * as echarts from "echarts/lib/echarts";
import "echarts/lib/chart/line";
export default {
  data() {
    return {
      show: true,
      list: [],
      items: [],
      titlelist: [
        {
          data: [
            { deviceID: "9295", result: "OK" },
            { deviceID: "ABI", result: "" },
            { deviceID: "AFI", result: "" },
            { deviceID: "DOA", result: "" },
            { deviceID: "EAC", result: "" },
            { deviceID: "MFI", result: "" },
          ],
          panId: "44-9742282B1099C0067B1BC1J8190",
        },
        {
          data: [
            { deviceID: "9295", result: "" },
            { deviceID: "ABI", result: "" },
            { deviceID: "AFI", result: "" },
            { deviceID: "DOA", result: "" },
            { deviceID: "EAC", result: "NG" },
            { deviceID: "MFI", result: "" },
          ],
          panId: "44-9742282B1099C0067B1B190",
        },
      ],
      tableData: [],
      deviceID: [],
      result: [],
      dataarr: [],
      title: [],
    };
  },
  sockets: {
    dataquery(data) {
      if (data.length == 0) {
        this.$alert("查询结果未能返回，请重新输入", "消息提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      } else {
        // console.log("第一步前端接受到返回数据===============》",JSON.parse(data));
        let temp = JSON.parse(data);
        let list = temp.barGraph;
        this.tableData = temp.barGraph;
        this.tableData.forEach((ele) => {
          // console.log(ele.deviceID)
          this.deviceID.push(ele.deviceID);
        });
        console.log("1111111111111111", this.tableData);
        this.flatSub(list);
        sessionStorage.setItem("datequery", JSON.stringify(temp));
        // localStorage.setItem("datequery", JSON.stringify(list));
      }
    },
  },
  created() {
    let data = sessionStorage.getItem("datequery");
    let tempcoli = JSON.parse(data);
    let list = tempcoli.barGraph;

    //  console.log(this.deviceID)
    this.flatSub(list);
  },

  mounted() {
    let data = sessionStorage.getItem("datequery");
    let tempcoli = JSON.parse(data);
    // console.log(tempcoli);
    let list = tempcoli.barGraph;
    this.tableData = tempcoli.barGraph;
    this.tableData.forEach((ele) => {
      // console.log(ele.deviceID)
      this.deviceID.push(ele.deviceID);
    });
    this.flatSub(list);
  },
  methods: {
    flatSub(data) {
      let a = [].concat(
        data.map((item) => {
          // console.log(item.data[0].defect)
          return item.data.map((i) => {
            return {
              panId: item.deviceID,
              defect: i.defect,
              val: i.val,
            };
          });
        })
      );
      this.tableData = [].concat(...a);
      // console.log(this.tableData)
    },
  },
};
</script>

<style  scoped>
.asdf {
  overflow: auto;
}
</style>